<template>
  <div class="keyboard-container">
    <div class="mask" @click="closeKeyboard"></div>
    <div class="keyboard-box">
      <div class="keyboard-box-inner">
        <div class="province-prefix" v-show="currentKeyPage === 0">
          <a href="javascript:;" class="province-item" :data-item="item" v-for="(item, index) in keyboardKeys.province" :key="item"
            @click="selectCarLicense(item)">{{item}}</a>
          <a href="javascript:;" class="English-item" @click="currentKeyPage = 1">ABC</a>
          <a href="javascript:;" class="del-item" @click="delLicenseNum"></a>
        </div>

        <div class="En-num" v-show="currentKeyPage === 1">
          <div class="num">
            <a href="javascript:;" class="num-item" v-for="item in keyboardKeys.number" :key="item" @click="selectCarLicense(item)">{{item}}</a>
          </div>
          <div class="en">
            <div class="en-list" :class="{'translateX': pindex === 2}" :data-list="pindex" v-for="(list, pindex) in keyboardKeys.english"
              :key="pindex">
              <a href="javascript:;" class="prefix-tiem" v-show="pindex === 2" @click="currentKeyPage = 0">省份</a>
              <a href="javascript:;" :data-item="item" class="en-item" v-for="(item, index) in list" :key="item" @click="selectCarLicense(item)">{{item}}</a>
            </div>
          </div>
          <div class="lastOne">
            <a href="javascript:;" class="lastOne-item" :data-item="item" v-for="(item, index) in keyboardKeys.lastOne" :key="item" @click="selectCarLicense(item)">{{item}}</a>
            <a href="javascript:;" class="del-item" @click="delLicenseNum"></a>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  const keyboardKeys = {
    province: ['京', '沪', '粤', '津', '浙', '苏', '湘', '渝', '云', '豫', '皖', '陕', '桂', '新', '青', '琼', '闽', '蒙', '辽', '宁',
      '鲁', '晋', '吉', '冀', '黑', '甘', '鄂', '赣', '贵', '川', '藏', '民'
    ],
    number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
    english: [
      ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
      ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
      ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
    ],
    lastOne: ['港', '澳', '警', '领', '使', '学']
  }

  export default {
    props: ['keyboardShow', 'carLicenseNum', 'licenseNumLength', 'changeIndex', 'activeIndex'],
    data() {
      return {
        keyboardKeys: keyboardKeys,
        currentKeyPage: 0,
        licenseNumber: ''
      }
    },
    created() {
      this.licenseNumber = this.carLicenseNum;
      if (this.carLicenseNum.length >= 1 && this.changeIndex !== 0) {
        this.currentKeyPage = 1;
      } else if (this.changeIndex === 0) {
        this.currentKeyPage = 0;
      }
    },
    methods: {
      selectCarLicense(item) {
        if ( (this.activeIndex === 1 || this.changeIndex === 1)) {
        		if(item === '0'){
        			item = 'O'
        		}
        		if (item === '1') {
          		item = 'I';
       		 	}
        } else if ((this.activeIndex > 1 || this.changeIndex > 1)){
        	if(item === 'O'){
        		item = 0;
        	}
        	if (item === 'I') {
          		item = 1;
       		}
        }
        if (this.licenseNumber.length === this.licenseNumLength && this.changeIndex === null) return;

        if (this.activeIndex === null && this.changeIndex !== null) {
          this.licenseNumber = this.licenseNumber.slice(0, this.changeIndex) + item + this.licenseNumber.slice(this.changeIndex + 1)
          this.$emit('getLicenseNum', this.licenseNumber);
          return;
        }

        if (this.currentKeyPage === 0) {
          if (item === '民') {
            this.licenseNumber += '民航'
          } else {
            this.licenseNumber += item;
          }
          this.currentKeyPage = 1;
        } else if (this.currentKeyPage === 1) {
          this.licenseNumber += item;
        }

        this.$emit('getLicenseNum', this.licenseNumber);

      },
      delLicenseNum() {
        this.licenseNumber = this.licenseNumber.slice(0, this.licenseNumber.length - 1);
        this.$emit('getLicenseNum', this.licenseNumber);
        if (this.licenseNumber.length === 0) {
          this.currentKeyPage = 0;
        }
      },
      closeKeyboard() {
        this.$emit('closeKeyboard')
      },
    },
    computed: {

    },
    watch: {
      licenseNumber(val) {
        if (val.length === this.licenseNumLength && this.changeIndex === null ) {
          this.$emit('closeKeyboard')
        }
      }
    }
  }

</script>

<style lang="less" scoped>
  @blue: #1C7DEF;
  .keyboard-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
  }

  .mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
  }

  .keyboard-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #D1D5DB;
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
      padding-bottom: 34px;
    }
    .keyboard-box-inner {
      position: relative;
    }
    .province-prefix {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 10px 20px;
      .province-item {
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        font-size: 40px;
        color: #030303;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.30);
        margin: 10px; // font-weight: bold;
        &:active {
          color: #fff;
          background: #3983E3;
        }
      }
      .English-item {
        background: #94BEF1;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35);
        border-radius: 10px;
        font-size: 32px;
        color: #030303;
        width: 184px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        margin: 10px;
      }
      .del-item {
        width: 80px;
        height: 80px;
        background: url("../assets/img/del-icon.png") no-repeat center center;
        background-size: cover;
        margin: 10px;
      }
    }

  }

  .En-num {
    .num {
      background: #BBC2CA;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      height: 124px;
      .num-item {
        width: 64px;
        height: 84px;
        line-height: 84px;
        text-align: center;
        border-radius: 10px;
        background: #FFFFFF;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35);
        font-size: 44px;
        color: #030303;
      }
    }
    .en {
      background: #D1D5DB;
      padding-top: 10px;
      padding-bottom: 10px;
      .en-list {
        height: 104px;
        display: flex;
        align-items: center;
        justify-content: center;
        .en-item {
          width: 64px;
          height: 84px;
          line-height: 84px;
          text-align: center;
          border-radius: 10px;
          background: #FFFFFF;
          box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35);
          font-size: 44px;
          color: #030303;
          margin: 6px;
        }
        .prefix-tiem {
          background: #94BEF1;
          box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35);
          border-radius: 10px;
          font-size: 32px;
          color: #030303;
          width: 120px;
          height: 80px;
          text-align: center;
          line-height: 80px;
          margin: 6px;
        }
        &.translateX {
          .prefix-tiem {
            transform: translateX(-40px);
          }
          .en-item {
            transform: translateX(-20px);
          }
        }
        .del-item {
          width: 80px;
          height: 80px;
          background: url("../assets/img/del-icon.png") no-repeat center center;
          background-size: cover;
          margin: 6px;
        }
      }
    }
    .lastOne {
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      background: #E4E6EA;
      .lastOne-item {
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        font-size: 36px;
        color: #030303;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.30);
        margin: 6px;
        &:not(.disabled):active {
          color: #fff;
          background: #3983E3;
        }
        &.disabled {
          opacity: 0.6;
        }
      }
      .del-item {
        width: 80px;
        height: 80px;
        background: url("../assets/img/del-icon.png") no-repeat center center;
        background-size: cover;
        margin: 6px;
      }
    }
  }

</style>
